<template>
	<div class="userSetting">
        <!-- 头部 -->
        <div class="nav_top d-flex jc-between ai-center bg-white">
            <div> 
                <el-button type="text" @click="$router.push('/user/userSetting')">
                    <div class="iconfont icon-back ml-1 fs-xxxl text-dark"></div>
                </el-button>
            </div>
            <div class="fs-xxl text-dark pr-3">
                重置密码
            </div>
            <div></div>
        </div>
        <div class="py-3 px-2">
            <mt-field class="border-bottom" :disableClear="true" :attr="{ maxlength: 11 }" type="number" v-model="model.username">
            </mt-field>
            <mt-field class="border-bottom" :disableClear="true" placeholder="短信验证码" type="number" v-model="model.code">
                <el-button size="mini" class="get-ver" :class="checkPhone()" @click="getCode()">获取验证码 {{backNum==0?'':backNum}}</el-button>
            </mt-field>
            <mt-field :disableClear="true" class="password-text" placeholder="请设置6位数以上密码" :type="inputType" v-model="model.password">

              <el-button size="mini" icon="el-icon-search" circle @click="eyeMethod()"></el-button>
          </mt-field>
      </div>
      <!-- 提交 -->
      <div class="bg-white my-3 px-2">
       <el-button type="danger" @click="submit">提交</el-button>
   </div>

</div>
</template>
<script>
    const checkPhoneReg = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
    import { Checklist, Field, Toast } from "mint-ui";
    export default {
      data() {
         return {
            user: {
                
            },
            model:{
                username: '',
                password: '',
                code: '',
            },
            openEye: false,
            eyeClass: "eye-close",
            inputType: "password",
            checkPass: false,
                validateCode: "",//获取到的验证码
                canSubmit: false,
                backNum: 0,
            }
        },
        methods: {
            eyeMethod() {
              this.openEye = !this.openEye;
              if (this.openEye) {
                this.eyeClass = "eye-open";
                this.inputType = "text";
            } else {
                this.eyeClass = "eye-close";
                this.inputType = "password";
            }
        },
    checkPhone() {
      if (
        !checkPhoneReg.test(this.username) ||
        this.backNum > 0 
        ) {
        this.checkPass = false;
    return "disabled";
} else {
    this.checkPass = true;
    return "ok";
}
},

async submit() {
    if (this.model.username == "") {
        Toast("请输入手机号");
        return;
    }
    if (!checkPhoneReg.test(this.model.username)) {
        Toast("您输入的手机号格式不对，请重新输入");
        return;
    }
    if (this.model.code == "") {
        Toast("请输入验证码");
        return;
    }
    if (this.model.password == "") {
        Toast("请输入密码");
        return;
    }
    if (this.model.password.length < 6) {
      Toast("请设置6位数以上密码");
      return;
   }
    const res = await this.$http.post('user/modifyPassword.do',this.model);
    if (res.data.code != 0) {
        this.$router.push('/user/userSetting')
        Toast("修改成功");
    }else{
      Toast(res.data.message);
  }
        
    },
async getCode() {
  
if (this.backNum == 0) {
        // 发起请求
        const res = await this.$http.get(`login/sendSms.do?phone=${this.model.username}&type=modifyPassword`);
        console.log(res.data)
        if (res.status == 200) {
            this.backNum = 60;
            let inter = setInterval(() => {
              this.backNum--;
              if (this.backNum == 0) {
                this.backNum = 0;
                clearInterval(inter);
            }
        }, 1000);
        } else {
            Toast(res.data.message);
        }
    }
},
},
created(){
    this.user = this.$store.getters.userInfo;
    this.model.username = this.user.username
}

}
</script>

<style lang="scss" scoped>
.el-button {
  width: 100%;

}

</style>